// 搜索
const search=document.querySelector('input')
const searchUl=document.querySelector('.searchUl')
const boxTwo=document.querySelector('.div2')
search.oninput=function(){
    const text=this.value
    const script=document.createElement('script')
    script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34099,33970,34004,33855,33607,26350,22159&wd=' + text + '&req=2&csor=5&pwd=aiqiyi&cb=fn&_=1623047595324'
    document.body.appendChild(script)
    script.remove()
}
function fn(res){
    if(!res.g){
        searchUl.style.display='none'
        return
    }
    let str=''
    res.g.forEach(item=>{
        str+=`<li>${item.q}</li>`
    })
    searchUl.innerHTML=str
    searchUl.style.display='block'
}
// 吸顶
window.addEventListener("scroll",()=>{
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
    let offsetTop = document.querySelector('.search').offsetTop;
    if (scrollTop > offsetTop) {
         document.querySelector('.search').style.position="fixed";
         document.querySelector('.search').style.top="0px";
         document.querySelector('.search').style.backgroundColor="white";
         document.querySelector('.search').style.zIndex="999"
    } else {
         document.querySelector('.search').style.position="";
         document.querySelector('.search').style.top="";
         
    }})
//放大镜
function Enlarge(select){
    this.ele = document.querySelector(select)
    this.show = this.ele.querySelector('.show')
    this.mask = this.ele.querySelector('.mask')
    this.enlarge = this.ele.querySelector('.enlarge')
    this.show_width = this.show.offsetWidth
    this.show_height = this.show.offsetHeight
    this.enlarge_width = parseInt(window.getComputedStyle(this.enlarge).width)
    this.enlarge_height = parseInt(window.getComputedStyle(this.enlarge).height)
    this.bg_width = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[0])
    this.bg_height = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[1])
    this.init()
}
//启动器,调用所有方法
Enlarge.prototype.init = function(){
this.setScale()
this.move()
this.overOut()
}
Enlarge.prototype.setScale = function(){
    this.mask_width=this.enlarge_width*this.show_width/this.bg_width
    this.mask_height=this.enlarge_height*this.show_height/this.bg_height
    this.mask.style.width = this.mask_width+'px'
    this.mask.style.height = this.mask_height+'px'
}
Enlarge.prototype.overOut = function(){
    this.show.addEventListener('mouseenter',()=>{
    this.mask.style.display='block'
    this.enlarge.style.display='block'
    })
    this.show.addEventListener('mouseleave',()=>{
        this.mask.style.display='none'
        this.enlarge.style.display='none'
    })
}
Enlarge.prototype.move = function(){
this.show.addEventListener('mousemove',e=>{
    e=e||window.event
    let x=e.offsetX-this.mask_width/2
    let y=e.offsetY-this.mask_height/2
    if(x<=0) x=0
    if(y<=0) y=0
    if(x>=this.show_width-this.mask_width) x=this.show_width-this.mask_width
    if(y>this.show_height-this.mask_height) y=this.show_height-this.mask_height
    this.mask.style.left=x+'px'
    this.mask.style.top=y+'px'
    const bg_x=this.bg_width/this.show_width*x
    const bg_y=this.bg_height/this.show_height*y
    this.enlarge.style.backgroundPosition=`-${ bg_x }px -${ bg_y }px`

    })
}

// 详情页
const infoBox = document.querySelector('.info')
const goodsId = window.sessionStorage.getItem('goods_id')
getGoodsInfo()
async function getGoodsInfo() {
  const res = await pAjax({
    url: 'http://localhost:8888/goods/item',
    data: `id=${goodsId}`,
    dataType: 'json',
  })

  infoBox.innerHTML = `
  <div class="div1 left">
  <div class="div1top " id="box">
      <div class="show"><img src="${ res.info.img_big_logo }" alt="">
              <div class="mask"></div>
          </div>
          <div class="enlarge" style="background-image: url(${ res.info.img_big_logo });"> </div>
      </div>
      <div class="div1bottom"><img src="${ res.info.img_big_logo }" alt=""></div>
  </div>
<div class="div2">
  <ul>
      <li class="desc">${ res.info.title }</li>
      <li>价格：<p class="price"> ￥${ res.info.current_price }</p></li>
      <li>运费：上海——北京 &nbsp; <p> 0.00 </p></li>
      <li>月销：<p>99+</p>&nbsp;&nbsp;评价：<p>99+</p> &nbsp;&nbsp;送积分<p>12</p></li>
      <li>颜色分类：<span></span><span></span><span></span><span></span><span></span><span></span>
      </li>
      <li>数量：<p>1</p> </li>
      <li>
          <button>立即购买</button>
          <button class="butGou">加入购物车</button>
      </li>
      <li><img src="./image/de3.png" alt=""></li>
  </ul>
</div>
  `
  // console.log(11)
  new Enlarge('#box')


}

//加入购物车
infoBox.addEventListener('click', async  e => {
    e = e || window.event
    const target = e.target || e.srcElement
    if (target.className === 'butGou') {
      const id = window.localStorage.getItem('id')
      const token = window.localStorage.getItem('token')
      window.sessionStorage.setItem('goods_id', id)
      if (!id || !token) {
        const result = window.confirm('您还没有登录, 点击确定跳转到登录页, 点击取消稍后在购买 !')
        window.localStorage.setItem('url', 'list')
        if (result) window.location.href = './login.html'
        return
      }
      console.log(id)
      const goodsId = id
      console.log(goodsId)
      const res = await pAjax({
        url: 'http://localhost:8888/cart/add',
        token,
        data: `id=${id}&goodsId=${goodsId}`,
        method: 'post',
        dataType: 'json'
      })
      if (res.code === 1) window.alert('加入购物车成功了')
    }
  })
